<#assign module="paidan"/>

<@override name="header">
<link rel="stylesheet" href="${ctx}/assets/css/form.css">
<style>

	.innerDrivers{
		width:230px;
		float:left;
		margin-left:10px;
	}
	.scrollDrivers{
		overflow-y:auto;
		max-height:70px;
		min-height:70px;
		padding-top:10px;
	}
	.list-group-item{
		color:#428bca;
		cursor: pointer;
	}
	.list-group-item:hover{
		background-color: #c9edf7;
	}
	.list-group-item-info {
		background-color: #d9edf7;
	}
	.panel-heading{
		padding: 10px 5px;
		border-bottom: 1px solid transparent;
		border-top-right-radius: 3px;
		border-top-left-radius: 3px;
	}
	.panel-heading-inner{
		color:#428bca;
		font-weight:700;
	}
	.panel-heading-inner span{
		color:#607ba5;
		font-weight:normal;
	}
	.revoke_yupaidan{
		display:none;
	}
	.paidan{
		float:right;
	}
	hr{
		margin-top:25px;
		margin-bottom: 0px;
	}
	.timeColor{
		color:#454f60;
	}
	
	/* autocomplete */
	div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;}
	div.ac > ul {margin-top:10px;padding:0;}
	div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
	div.ac > ul > li:hover{background:#eee;}
	div.ac > ul > li > div p {padding-left:15px;}
	
</style>
</@override>
<@override name="body">

	<div class="row">
		<div class="col-md-12 col-lg-12" id="totalDiv">

    		<div class="row margin-top">
				
				<div class="table-responsive">
					
					<div class="col-lg-8 panel-left">
						<div class="panel panel-default">
							<div class="panel-heading">
								上线中服务人员
								<button class="pull-right btn btn-default btn-xs" onclick="window.location.reload(true);"><i class="icon-refresh"></i>&nbsp;刷新</button>
						    </div>
						    <div id="driver_panels" class="panel-body">
						    	<#list drivers as driver>
				    				<div id="driver_panel_${driver.id}" class="panel panel-default innerDrivers">
									  <div class="panel-heading">
									  	<div class="panel-heading-inner">${driver.realname?if_exists} <span class="driver_position">定位中...</span></div>
									  </div>
									  <div class="panel-body scrollDrivers">
									  
									    <input type="hidden" name="driverlng" value="${driver.longitude}">
									    <input type="hidden" name="driverlat" value="${driver.latitude}">
									    <div id="driverWorkingOrder_${driver.id}">
									    <#list driver.workingOrders as workingOrder>
										    <p style="text-align:center;">
											    <span style="float:left;">
												    <a title="${workingOrder.fromPlace?if_exists}"><#if workingOrder.fromPlace?? && (workingOrder.fromPlace?length>5)>${workingOrder.fromPlace?substring(0,5)}<#else>${workingOrder.fromPlace?if_exists}</#if></a>
												    <br/>
												    <span class="timeColor">(${workingOrder.serverTime?string("HH:mm")})</span>
											    </span>
											    →
											    <span class="right-span" style="float:right;">
											    	<#if workingOrder.hasToPlace>
												    	<input type="hidden" name="toplacelng" value="${workingOrder.toPlaceLongitude}">
										    			<input type="hidden" name="toplacelat" value="${workingOrder.toPlaceLatitude}">
									    
											    		<a title="${workingOrder.toPlace?if_exists}"><#if (workingOrder.toPlace?length>5)>${workingOrder.toPlace?substring(0,5)}<#else>${workingOrder.toPlace?if_exists}</#if></a>
											    		<br/>
											    		<span class="timeColor toplace_time">计算中...</span>
											    	<#else>
											    		<span class="timeColor">未知目的地<br/>未知时间</span>
											    	</#if>
											    </span>
										    </p>
										    <hr/>
									    </#list>
									    </div>
									    
									    <div id="driverYupaidanOrder_${driver.id}">
									    <#if driver.yupaidanOrders?? && (driver.yupaidanOrders?length>0)>
									    	<#list driver.yupaidanOrders as yupaidanOrder>
											    <div id="newOrders_div_${yupaidanOrder.id}">
												    <p class="newOrders_p" style="text-align:right;padding-right:13px;">
													    <span style="float:left;"><a title="${yupaidanOrder.fromPlace?if_exists}"><#if yupaidanOrder.fromPlace?? && (yupaidanOrder.fromPlace?length>8)>${yupaidanOrder.fromPlace?substring(0,8)}<#else>${yupaidanOrder.fromPlace?if_exists}</#if></a></span>
													    (${yupaidanOrder.serverTime?string("HH:mm")})
													    <span class="revoke_yupaidan" style="float:right;"><a data-value="${yupaidanOrder.id}" href="javascript:;"><img src="${ctx}/assets/css/images/delete.png" /></a></span>
												    </p>
												    <hr/>
										    	</div>
										    </#list>
										</#if>
										</div>
										
									  </div>
									</div>
								</#list>
			        		</div>
						</div>
					</div>
				
					<div class="col-lg-4 panel-right">
						<div class="panel panel-default">
							<div class="panel-heading">
								派单
						    </div>
						   	<div class="panel-body">
						   		
				                <input id="search_driver" placeholder="输入服务人员姓名、电话" class="form-control" type="text" value=""/>
			                    
			                    <br/>
			                    
		                    	<ul id="drivers_ul" class="list-group" style="overflow-y:auto;max-height:320px;">
								</ul>
								
								<hr/>
			                    <b>新单</b>
		                    	<ul id="newOrder_ul" class="list-group" style="overflow-y:auto;max-height:380px;">
		                    		<#list newOrders as newOrder>
		                    			<li id="newOrder_${newOrder.id}" class="list-group-item">
										    <input type="radio" name="newOrderRadios" value="${newOrder.id}">
										   	${newOrder.serverTime?string("HH:mm")} ${newOrder.fromPlace?if_exists}
										</li>
		                    		</#list>
								</ul>
								
						   	</div>
						</div>
					</div>
			        	
				</div>
				
			</div>
	
		</div>
	</div>
	
	<form class="form-horizontal" method="post">
		<div class="modal fade" id="dialog_revoke">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		        <h4 class="modal-title">输入收回原因</h4>
		      </div>
		      <div class="modal-body">
		      	<input type="hidden" name="id" id="dialog_revoke_id">
		      	<div class="form-group">
		            <div class="col-sm-12">
		                <textarea class="form-control" cols="20" id="dialog_revoke_content" name="content" rows="2" required></textarea>
		            </div>
		        </div>
		      </div>
		      <div class="modal-footer">
		    	<button type="button" class="btn btn-primary" id="ok_modal_revoke" action="${ctx}/order/revokepost">提交</button>
		    	<button type="button" class="btn btn-default" id="close_modal_revoke">关闭</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div>
	</form>

</@override>
<@override name="footer">
<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
<script src="${ctx}/assets/js/listmode.js" type="text/javascript"></script> 
<script type="text/javascript">

</script>
</@override>
<@extends name="../layout.ftl"/>